<template>
	<view>
		<topbar title="开通会员" jt_c="2" background="background:#222222;color:#fff;"></topbar>

		<view class="content">
			<view class="top dis_f_co">
				<view class="dis_f_sb">
				<view class="dis_f_co">
					<view style="margin-bottom: 6rpx;">当前零钱</view>
					<view class="title">{{user.money}}</view>
					<view style="margin-bottom: 6rpx;display: flex;justify-content: center;align-items: center;">
						<view class="ck_btn dis_f_c_c" style="margin-right: 20rpx;" @click="go_tx">提现</view>
					<view class="ck_btn dis_f_c_c" style="margin-left: 20rpx;" @click="go_cz">充值</view>
						
					</view>
					
					<view>累计收益: {{user.moremoney}}</view>
				</view>
				</view>
			</view>
			<!-- <view class="zx_sy dis_f_l_c">
				<view style="color: #FFDE21;margin-right: 16rpx;">最新收益</view>
				<view style="font-size: 22rpx;line-height: 32rpx;color: #777;margin-right: 42rpx;">亿白团队  2021-08-20  成功提现</view>
				<view style="color: #E23C63;">17.51</view>
			</view> -->
			<view class="zy_sx">
				注 :会员发布广告不限次、非会员每日可以发布一次开通会员才能吃团队收益、非会员只能拿两代收益
			</view>
			<view class="kt_hy">
				<view class="dis_f_sb_c" style="width: 100%;margin-bottom: 50rpx;">
					<view style="font-size: 28rpx;line-height: 40rpx;">开通会员</view>
					<view class="dis_f_l_c" style="font-size: 22rpx;line-height: 32rpx;color: #777777;">
						<view style="margin-right: 24rpx;">剩余刷新：{{user.refresh_num}}次</view>
						<!-- <view>剩余刷新：150次</view> -->
					</view>
				</view>
				
				
				
				<view class="dis_f_sb_c">
					<view v-for="(item,index) in je_list" :key="item.id" @click="selectColor(index,item)">
						<view class="jin_e dis_f_co" :class="[ item.selected ? 'jin_e2' : 'jin_e']">
							<view class="je_top dis_f_c_c">{{item.title}}</view>
							<view class="dis_f_co_c_c">
								<view style="margin-bottom: 12rpx;">赠送{{item.refresh_num}}次刷新</view>
								<view class="num">￥{{item.money}}</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
			<view class="kt_btn dis_f_c_c" @click="check">立即开通</view>
			<u-popup v-model="show" mode="center" width="400" height="300" border-radius="20">
				<view class="dis_f_co_l_c tc_pay">
					<view v-if="wx_show" class="dis_f_l_c" @click="pay" style="margin-bottom: 30rpx;margin-left: 100rpx;">
						<image src="../../static/mine/vx.png" mode=""></image>
						<view>微信支付</view>
					</view>
					<view class="dis_f_l_c" @click="pay2" style="margin-bottom: 30rpx;margin-left: 100rpx;">
						<image src="../../static/mine/zfb.png" mode=""></image>
						<view>支付宝支付</view>
					</view>
					<view class="dis_f_l_c" @click="pay_show = true" style="margin-left: 100rpx;">
						<image src="../../static/mine/lingqian.png" mode=""></image>
						<view>零钱</view>	
					</view>
				</view>
			</u-popup>
			<!-- <view @click="show = true" class="zf_btn dis_f_c_c">支付</view> -->
			<u-keyboard
				default=""
				ref="uKeyboard" 
				mode="number" 
				:mask="true" 
				:mask-close-able="false"
				:dot-enabled="false" 
				v-model="pay_show"
				:safe-area-inset-bottom="true"
				:tooltip="false"
				@change="onChange"
				@backspace="onBackspace">
				<view>
					<view class="u-text-center u-padding-20 money">
						<text>{{je}}</text>
						<text class="u-font-20 u-padding-left-10">元</text>
						<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)">
							<u-icon name="close" color="#333333" size="28"></u-icon>
						</view>
					</view>
					<view class="u-flex u-row-center">
						<u-message-input 
							mode="box" 
							:maxlength="6"
							:dot-fill="true"
							v-model="password"
							:disabled-keyboard="true"
							@finish="finish"
						></u-message-input>
					</view>
					<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
				</view>
			</u-keyboard>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '零钱'
				}, {
					name: '金币'
				}, ],
				current: 0,
				hy_level: true,
				je_list: [{
						name: '月度会员',
						num:'10',
						price:'39.9',
						id: 1,
						selected: false
					},
					{
						name: '季度会员',
						num:'50',
						price:'89.9',
						id: 2,
						selected: false
					},
					{
						name: '年度会员',
						num:'100',
						price:'299.9',
						id: 3,
						selected: false
					}
				],
				je:'',
				user:[],
				name : '',
				id:0,
				show:false,
				password:'',
				pay_show:false,
				wx_show:true,
			};
		},
		
		onLoad() {
			console.log(uni.getSystemInfoSync().platform)
			if(uni.getSystemInfoSync().platform == 'ios'){
				this.wx_show = false
			}
			this.$.ajax(1, 'post', 'index/getuser', {
				uid:uni.getStorageSync('uid'),
				token:uni.getStorageSync('token')
			}, (res) => {
				console.log(res)
				if(res.code == 1){
				this.user = res.userinfo
				}
				
			})
			this.$.ajax(1, 'post', 'index/getviplist', {
				uid:uni.getStorageSync('uid'),
				token:uni.getStorageSync('token')
			}, (res) => {
				console.log(res)
				if(res.code == 1){
				this.je_list = res.list
				}
			})
			},
		methods: {
			check(){
				if(this.je == ''){
					this.$.ti_shi('请选择会员规格');return;
				}else{
					this.show = true
				}
			},
			pay2(){
				this.$.ajax(1, 'post', 'index/checktokens', {
						uid:uni.getStorageSync('uid'),
						token:uni.getStorageSync('token')
					}, (res) => {
						console.log(res)
						if(res.code == 9){
							this.$.ti_shi('token已过期，请重新登陆')
						uni.clearStorageSync()
							setTimeout( () => {
								uni.navigateTo({
									url:'/pages/login/login'
								})
							}, 1000)
						return;
						}
						else{
								this.$.ajax(1, 'post', 'alipay/alipay', {
								uid:uni.getStorageSync('uid'),
								token:uni.getStorageSync('token'),
								money:this.je,
								title:this.name,
								id:this.id
							}, (res) => {
								console.log(res)
								if(res.code == 1) {
									uni.requestPayment({
										provider: 'alipay',
										orderInfo: res.data,
										success: function (res) {
											console.log(res);
										},
										fail: function (err) {
											console.log('fail:' + JSON.stringify(err));
										}
									});
								}else{
									this.$.ti_shi(res.msg);
									return;
								}
							})
						}
					})
			},
			pay(){
				
				this.$.ajax(1, 'post', 'index/checktokens', {
						uid:uni.getStorageSync('uid'),
						token:uni.getStorageSync('token')
					}, (res) => {
						console.log(res)
						if(res.code == 9){
							this.$.ti_shi('token已过期，请重新登陆')
						uni.clearStorageSync()
							setTimeout( () => {
								uni.navigateTo({
									url:'/pages/login/login'
								})
							}, 1000)
						return;
						}
						else{		
							this.$.ajax(1, 'post', 'wxpay/wxpayvip', {
								uid:uni.getStorageSync('uid'),
								token:uni.getStorageSync('token'),
								money:this.je,
								title:this.name,
								id:this.id
							}, (res) => {
								console.log(res)
								if(res.code == 1){
									// console.log(res.data.timestamp)
								uni.requestPayment({
									provider: 'wxpay',
									orderInfo: {
													"appid": res.data.appid,
													"noncestr": res.data.noncestr,
													"package": "Sign=WXPay",
													"partnerid": res.data.partnerid,
													"prepayid": res.data.prepayid,
													"timestamp": res.data.timestamp,
													"sign": res.data.sign
												},
									success: function (res) {
										console.log(res);
									},
									fail: function (err) {
										console.log('fail:' + JSON.stringify(err));
									}
								});
								}else{
									this.$.ti_shi(res.msg);
									return;
								}
								
							})
						}
					})
				
			},
			
			change(index) {
				this.current = index;
			},
			go_tx() {
				this.$.ajax(1, 'post', 'index/checktokens', {
						uid:uni.getStorageSync('uid'),
						token:uni.getStorageSync('token')
					}, (res) => {
						console.log(res)
						if(res.code == 9){
							this.$.ti_shi('token已过期，请重新登陆')
						uni.clearStorageSync()
							setTimeout( () => {
								uni.navigateTo({
									url:'/pages/login/login'
								})
							}, 1000)
						return;
						}
						else{
							this.$.open('/pages/mine/new_tx')
						}
					})
				
			},
			go_cz(){
				this.$.ajax(1, 'post', 'index/checktokens', {
						uid:uni.getStorageSync('uid'),
						token:uni.getStorageSync('token')
					}, (res) => {
						console.log(res)
						if(res.code == 9){
							this.$.ti_shi('token已过期，请重新登陆')
						uni.clearStorageSync()
							setTimeout( () => {
								uni.navigateTo({
									url:'/pages/login/login'
								})
							}, 1000)
						return;
						}
						else{
							this.$.open('/pages/mine/ti_xian?cz='+1)
						}
					})
				
			},
			selectColor(index, item) {
				let that = this
				for (let items in that.je_list) { //这个循环的时候要用for in 来遍历 当前选中下标为true 其他的下标为false 避免多选
					that.je_list[items].selected = false;
					that.je_list[index].selected = true;
					that.je = that.je_list[index].money ;
					that.name =  that.je_list[index].title ;
					that.id =  that.je_list[index].id ;
				}
				console.log(that.je)
			},
		
		
		
			onChange(val){
				// console.log(this.password)
				if(this.password.length<6){
					this.password += val;
					
				}
				
				if(this.password.length>=6){
					this.money_pay();
				}
			},
			onBackspace(e){
				if(this.password.length>0){
					this.password = this.password.substring(0,this.password.length-1);
				}
			},
			showPop(flag = true){
				this.password = '';
				this.pay_show = flag;
			},
			money_pay(){
				if(this.user.money*1 < this.je*1){
					this.$.ti_shi('您的零钱不足')
					return;
				}
				if(this.password == ''){
					this.$.ti_shi('请输入密码')
					return;
				}
				if (this.id > 0) {
					this.$.ajax(1, 'post', 'task/goods_vip', {
						uid:uni.getStorageSync('uid'),
						token:uni.getStorageSync('token'),
						password:this.password,
						id:this.id,
					}, (res) => {
						console.log(res)
						if(res.code == 1){
							this.$.ti_shi(res.msg)
							var that = this;
							setTimeout(function() {
								that.$.open_tab('/pages/mine/mine');
							}, 2000);
						}else{
							this.password = '';
							this.$.ti_shi(res.msg);
							if(res.code == 9) {
								var that = this;
								setTimeout(function() {
									that.$.open('/pages/login/login');
								}, 2000);
							}  
						}
					})
				}else{
					this.$.ti_shi('参数错误');
				}
				this.pay_show = false
			}
					
					
		}
	}
</script>

<style lang="scss">
	.tc_pay{
		width: 100%;
		// padding: 20rpx;
		height: 100%;
		
		image{
			width: 60rpx;
			height: 60rpx;
			margin-right: 20rpx;
			
		}
	}
	.tg_bz {
		position: fixed;
		z-index: 999;
		font-size: 22rpx;
		line-height: 32rpx;
		top: calc(var(--status-bar-height) + 30rpx);
		right: 48rpx;
		color: #fff;

		image {
			width: 34rpx;
			height: 34rpx;
			margin-right: 6rpx;
		}

	}

	.content {
		width: 100%;
		padding: 0 24rpx 0 24rpx;
		top: calc(var(--status-bar-height) + 124rpx);

		z-index: 998;
		position: absolute;

		.top {
			width: 100%;
			padding: 36rpx 56rpx 20rpx 48rpx;
			height: 318rpx;
			position: relative;
			background-image: url(../../static/mine/qbbg.png);
			background-size: 100% 100%;
			// padding: 36rpx 0 24rpx 48rpx;
			margin-bottom: 24rpx;
			color: #fff;

			.title {
				font-size: 72rpx;
				line-height: 100rpx;
				margin-bottom: 12rpx;
			}
		}

		.text1 {
			font-size: 22rpx;
			line-height: 32rpx;
			margin-bottom: 14rpx;
		}

		.text2 {
			font-size: 34rpx;
			line-height: 48rpx;
			margin-bottom: 14rpx;
		}

		.ck_btn {
			width: 144rpx;
			height: 50rpx;
			border-radius: 30rpx;
			background-color: #E23C63;
			margin-bottom: 24rpx;
			font-size: 22rpx;
		}
		.zx_sy{
			width: 100%;
			padding: 32rpx 0 36rpx 24rpx;
			margin-bottom: 24rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
			font-size: 28rpx;
			line-height: 40rpx;
		}
		.zy_sx{
			width: 100%;
			padding: 36rpx 24rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
			color: #E23C63;
			margin-bottom: 24rpx;
		}
		.kt_hy{
			width: 100%;
			background-color: #fff;
			margin-bottom: 26rpx;
			border-radius: 20rpx;
			box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
			padding: 36rpx 24rpx 24rpx 24rpx;
		}
	}
	.jin_e {
		border-radius: 20rpx;
		width: 204rpx;
		height: 180rpx;
		box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
		color: #222;
		font-size: 22rpx;
		line-height: 32rpx;
		background-color: #fff;
		margin-bottom: 36rpx;
		.num{
			font-weight: bold;
			font-size: 36rpx;
			line-height: 50rpx;
		}
		.je_top{
			width: 204rpx;
			margin-bottom: 12rpx;
			height: 56rpx;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			background-color: #bbb;
			font-size: 22rpx;
			line-height: 32rpx;
			color: #fff;
		}
		
	}
	
	.jin_e2 {
		border-radius: 20rpx;
		width: 204rpx;
		height: 180rpx;
		box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
		color: #E6B35A;
		font-size: 22rpx;
		line-height: 32rpx;
		background-color: #fff;
		margin-bottom: 36rpx;
		border: 2rpx solid #E6B35A;
		border-radius: 20rpx;
		.num{
			font-weight: bold;
			font-size: 36rpx;
			line-height: 50rpx;
		}
		.je_top{
			width: 204rpx;
			margin-bottom: 12rpx;
			height: 56rpx;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			background-color: #E6B35A;
			font-size: 22rpx;
			line-height: 32rpx;
			color: #fff;
		}
		
	}
	.kt_btn{
		width: 100%;
		height: 98rpx;
		background-color: #E23C63;
		border-radius: 50rpx;
		color: #fff;
	}
	.money{
		font-size: 80rpx;
		color: $u-type-warning;
		position: relative;
		
		.close{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			line-height: 28rpx;
			font-size: 28rpx;
		}
	}
	.tips{
		color:$u-tips-color;
	}
	.zf_btn{
		color: #fff;
		background-color: #E23C63;
		border-radius: 20rpx;
		width: 100%;
		height: 88rpx;
	}
</style>
